<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>MD Lite Reader</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown-light.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --header-h: 56px;
            --footer-h: 50px;
            --border-color: #e1e4e8;
            --bg-color: #f6f8fa;
            --safe-area-bottom: env(safe-area-inset-bottom);
        }

        /* 基础重置 */
        body { 
            margin: 0; padding: 0; 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; 
            height: 100vh; /* 强制占满视口 */
            display: flex; flex-direction: column; overflow: hidden; 
            background: var(--bg-color); 
        }

        /* --- Header --- */
        header {
            height: var(--header-h); flex-shrink: 0; /* 防止头部被压缩 */
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 12px; gap: 10px; z-index: 50; box-sizing: border-box;
            transition: transform 0.3s ease;
        }

        .left-group { display: flex; align-items: center; gap: 8px; flex: 1; }
        .right-group { display: flex; align-items: center; gap: 8px; }

        .url-input-group {
            flex: 1; display: flex; background: #f1f3f5; border-radius: 18px;
            padding: 2px 4px; max-width: 400px;
        }

        #url-input {
            flex: 1; border: none; background: transparent; padding: 6px 10px;
            font-size: 13px; outline: none; min-width: 0;
        }

        .btn {
            border: none; background: #2ea44f; color: white; padding: 6px 12px;
            border-radius: 16px; cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap;
        }
        .btn-icon { background: transparent; color: #555; font-size: 16px; padding: 6px; }
        .btn-icon:hover { background: rgba(0,0,0,0.05); color: #000; }
        .btn-icon.active { color: #0969da; background: rgba(9, 105, 218, 0.1); }
        .btn-clear { color: #d73a49; }

        /* --- Main Area (关键布局修正) --- */
        main { 
            flex: 1; /* 占据剩余所有垂直空间 */
            display: flex; 
            position: relative; 
            overflow: hidden; /* 防止 main 自身滚动 */
            width: 100%; 
            height: calc(100vh - var(--header-h)); /* 明确高度计算，防止塌陷 */
        }

        /* 通用面板样式 */
        .pane { 
            flex: 1; 
            height: 100%; /* 关键：强制高度占满父容器 */
            background: #fff; 
            display: flex; 
            flex-direction: column; 
        }

        /* --- 左侧编辑器 (修复点) --- */
        #editor-pane {
            border-right: 1px solid var(--border-color);
            overflow: hidden; /* 禁止容器滚动，让 Textarea 滚 */
        }
        
        textarea {
            flex: 1; 
            height: 100%; /* 关键：强制撑满容器 */
            width: 100%; 
            border: none; 
            padding: 20px; 
            resize: none; /* 禁止手动拉伸 */
            outline: none; 
            font-family: 'SFMono-Regular', Consolas, monospace;
            font-size: 14px; 
            line-height: 1.6; 
            box-sizing: border-box;
            overflow-y: auto; /* 让 textarea 自身产生滚动条 */
        }

        /* --- 右侧预览区 --- */
        #preview-pane {
            overflow-y: auto; /* 预览容器需要滚动 */
        }

        .markdown-body {
            box-sizing: border-box; min-width: 200px; max-width: 900px;
            margin: 0 auto; padding: 40px; width: 100%;
        }

        /* --- 视图模式 --- */
        /* 纯预览模式 (PC) */
        body.view-preview-only #editor-pane { display: none !important; }
        body.view-preview-only #preview-pane { flex: 1; border-left: none; }
        body.view-preview-only .markdown-body { max-width: 800px; }

        /* --- Mobile Tab --- */
        #mobile-tab {
            display: none; height: calc(var(--footer-h) + var(--safe-area-bottom));
            background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
            border-top: 1px solid var(--border-color);
            justify-content: space-around; padding-bottom: var(--safe-area-bottom);
            box-sizing: border-box; z-index: 50; transition: transform 0.3s ease;
            flex-shrink: 0; /* 防止 Tab 被压缩 */
        }
        .tab-item {
            flex: 1; display: flex; flex-direction: column; justify-content: center;
            align-items: center; color: #999; cursor: pointer; font-size: 10px;
        }
        .tab-item i { font-size: 20px; margin-bottom: 2px; }
        .tab-item.active { color: #0969da; }

        /* --- Responsive --- */
        @media (max-width: 768px) {
            .right-group { display: none; }
            header { position: absolute; top: 0; width: 100%; }
            #mobile-tab { display: flex; position: absolute; bottom: 0; width: 100%; }
            
            /* 移动端高度修正 */
            main { 
                height: 100%; /* 移动端让 main 填满 body */
                padding-top: var(--header-h); 
                padding-bottom: calc(var(--footer-h) + var(--safe-area-bottom)); 
            }
            
            #editor-pane { border-right: none; }
            .pane { display: none; width: 100%; }
            .pane.active { display: flex; } /* 移动端显示时也要 display flex 保证高度 */
            
            .markdown-body { padding: 20px 15px; }

            /* 沉浸式 */
            body.immersive header { transform: translateY(-100%); }
            body.immersive #mobile-tab { transform: translateY(100%); }
        }

        #loading {
            position: absolute; top: 0; left: 0; width: 100%; height: 2px;
            background: linear-gradient(90deg, transparent, #2ea44f, transparent);
            z-index: 100; display: none;
        }
        .is-loading #loading { display: block; animation: loading 1.5s infinite; }
        @keyframes loading { 0% {transform:translateX(-100%)} 100% {transform:translateX(100%)} }
    </style>
</head>
<body class="view-split">
    
    <div id="loading"></div>

    <header>
        <div class="left-group">
            <div class="url-input-group">
                <input type="text" id="url-input" placeholder="输入 Markdown URL" autocomplete="off">
            </div>
            <button class="btn" onclick="loadFromUrlInput()">加载</button>
            <button class="btn btn-icon btn-clear" onclick="clearContent()" title="清空"><i class="fas fa-trash-alt"></i></button>
        </div>

        <div class="right-group">
            <button class="btn btn-icon active" id="btn-split" onclick="setPcView('split')" title="分屏编辑">
                <i class="fas fa-columns"></i>
            </button>
            <button class="btn btn-icon" id="btn-preview" onclick="setPcView('preview')" title="全屏阅读">
                <i class="fas fa-eye"></i>
            </button>
        </div>
    </header>

    <main>
        <div id="editor-pane" class="pane active">
            <textarea id="editor" placeholder="# Hello World\n\n左侧编辑，右侧实时预览。\n\n- [x] 完美高度\n- [x] 滚动独立"></textarea>
        </div>
        <div id="preview-pane" class="pane">
            <div id="output" class="markdown-body"></div>
        </div>
    </main>

    <nav id="mobile-tab">
        <div class="tab-item active" onclick="switchMobileTab('editor')">
            <i class="fas fa-pen"></i><span>编辑</span>
        </div>
        <div class="tab-item" onclick="switchMobileTab('preview')">
            <i class="fas fa-book-open"></i><span>预览</span>
        </div>
    </nav>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.2/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

    <script>
        const editor = document.getElementById('editor');
        const output = document.getElementById('output');
        const urlInput = document.getElementById('url-input');
        const previewPane = document.getElementById('preview-pane');
        const body = document.body;

        marked.setOptions({
            highlight: (code, lang) => highlight.highlight(code, { language: highlight.getLanguage(lang) ? lang : 'plaintext' }).value,
            langPrefix: 'hljs language-', breaks: true, gfm: true
        });

        function render() { output.innerHTML = marked.parse(editor.value); }
        editor.addEventListener('input', render);

        async function fetchMarkdown(url) {
            if(!url) return;
            body.classList.add('is-loading');
            try {
                const res = await fetch(url);
                if (!res.ok) throw new Error(res.status);
                editor.value = await res.text();
                render();
                if (window.innerWidth <= 768) switchMobileTab('preview');
                else setPcView('preview'); 
            } catch (e) { alert('Err: ' + e.message); } 
            finally { body.classList.remove('is-loading'); }
        }

        function loadFromUrlInput() { 
            const url = urlInput.value.trim();
            if(url) fetchMarkdown(url); 
        }
        function clearContent() { if(confirm('Clear?')) { editor.value=''; render(); } }

        function setPcView(mode) {
            if (mode === 'preview') {
                body.classList.add('view-preview-only');
                body.classList.remove('view-split');
            } else {
                body.classList.remove('view-preview-only');
                body.classList.add('view-split');
            }
            document.getElementById('btn-split').classList.toggle('active', mode === 'split');
            document.getElementById('btn-preview').classList.toggle('active', mode === 'preview');
        }

        function switchMobileTab(mode) {
            const tabs = document.querySelectorAll('.tab-item');
            const editorPane = document.getElementById('editor-pane');
            const previewPane = document.getElementById('preview-pane');

            if (mode === 'editor') {
                editorPane.classList.add('active');
                previewPane.classList.remove('active');
                tabs[0].classList.add('active'); tabs[1].classList.remove('active');
                body.classList.remove('immersive');
            } else {
                editorPane.classList.remove('active');
                previewPane.classList.add('active');
                tabs[0].classList.remove('active'); tabs[1].classList.add('active');
                render();
            }
        }

        let lastScroll = 0;
        previewPane.addEventListener('scroll', function() {
            if (window.innerWidth > 768) return;
            const now = this.scrollTop;
            if (now <= 0) { body.classList.remove('immersive'); return; }
            if (now > lastScroll + 10) body.classList.add('immersive');
            else if (now < lastScroll - 10) body.classList.remove('immersive');
            lastScroll = now;
        });

        const params = new URLSearchParams(window.location.search);
        if (params.get('src')) {
            urlInput.value = params.get('src');
            fetchMarkdown(params.get('src'));
        } else { render(); }

        window.addEventListener('resize', () => {
            if(window.innerWidth > 768) {
                document.querySelectorAll('.pane').forEach(el => el.classList.remove('active'));
                body.classList.remove('immersive');
            }
        });
    </script>
</body>
</html>